<template>
    <div class="container">
        <div class="menu-area">
            <RadioGroup v-model="engine">
                <Radio v-for="(item, index) in engineOptions" :label="item" :key="index"></Radio>
            </RadioGroup>
            <Button @click="transform" class="btn-group" size="small">转换</Button>
        </div>
        <div class="sitdown-demo">
            <textarea v-model="input"/>
            <textarea class="result"  disabled :value="result"/>
        </div>
    </div>
</template>
<script>
import { Sitdown, RootNode } from 'sitdown/dist/src.esm'
import { applyJuejinRule } from '@sitdown/juejin/dist/src.esm'
import { applyWechatRule, extraFootLinks } from '@sitdown/wechat/dist/src.esm'
import { applyZhihuRule } from '@sitdown/zhihu/dist/src.esm'
import { applyJSWeeklyRule } from '@sitdown/javascriptweekly/dist/src.esm'
// GitHub Flavored Markdown
const gfm = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced'
})
const juejin = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced',
  bulletListMarker: '-',
  hr: '---'
})
juejin.use(applyJuejinRule)

let wechat = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced',
  bulletListMarker: '-',
  hr: '---'
})
wechat.use(applyWechatRule)
const wechatToMD = (html) => {
  const root = new RootNode(html)
  const footLinks = extraFootLinks(root)
  return wechat.HTMLToMD(html, { footLinks })
}

let zhihu = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced',
  bulletListMarker: '-',
  hr: '---'
})
zhihu.use(applyZhihuRule)

let jsWeekly = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced',
  bulletListMarker: '-',
  hr: '---',
  convertNoHeaderTable: true
})
jsWeekly.use(applyJSWeeklyRule)

let csdn = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced',
  bulletListMarker: '-',
  hr: '---'
})

const methods = {
  GFM: input => gfm.HTMLToMD(input),
  Juejin: input => juejin.HTMLToMD(input),
  Zhihu: input => zhihu.HTMLToMD(input),
  Wechat: input => wechatToMD(input),
  CSDN: input => csdn.HTMLToMD(input),
  JSWeekly: input => jsWeekly.HTMLToMD(input)
}

export default {
  data () {
    return {
      input: '',
      result: '',
      engine: 'GFM',
      engineOptions: ['GFM', 'Wechat', 'Zhihu', 'Juejin', 'CSDN', 'JSWeekly']
    }
  },
  methods: {
    transform () {
      const result = methods[this.engine](this.input)
      this.result = result
      this.copy()
    },
    copy () {
      const copyTextarea = document.createElement('textarea')
      copyTextarea.value = this.result
      document.querySelector('.btn-group').appendChild(copyTextarea)
      copyTextarea.focus()
      copyTextarea.select()

      try {
        document.execCommand('copy')
        alert('result already copy to your clipborad~')
        copyTextarea.blur()
      } catch (err) {
        console.log(err)
      }
      document.querySelector('.btn-group').removeChild(copyTextarea)
    }
  },
  mounted () {
    this.input = ''
  }
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  .menu-area {
      height: 50px;
      line-height: 26px;
      padding: 12px 24px;
      position: absolute;
  }
  .sitdown-demo {
      display: flex;
      height: 100%;
      padding-top: 50px;
      textarea, .result {
          width: 50%;
          height: 100%;
          padding: 10px;
      }
  }
}
</style>
